<!--
 * @Author: C.
 * @Date: 2021-12-24 14:17:41
 * @LastEditTime: 2021-12-24 16:58:37
 * @Description: file content
-->
<template>
  <view class="j-search-page">
    <u-navbar title="listDemo">
      <view style="width: 600rpx">
        <u-search
          placeholder="日照香炉生紫烟"
          v-model="KeyWord"
          height="70"
          :showAction="false"
          :focus="true"
          @search="search"
        ></u-search>
      </view>
    </u-navbar>
    <!-- 搜索模块 -->
    <view class="block" v-if="historyTags.length !== 0">
      <view class="block-bar">
        <view class="title">历史搜索</view>
        <view class="clear" @click="clearCache">
          <u-icon name="trash-fill" size="25"></u-icon> 删除
        </view>
      </view>
      <view class="block-tags">
        <view
          class="j-tag"
          v-for="i in historyTags"
          :key="i"
          @click="(KeyWord = i), search()"
          >{{ i }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { LocalLRU } from "@/jv_doc/class";
export default {
  data() {
    return {
      KeyWord: "",
      historyCache: {},
      historyTags: []
    };
  },
  onLoad(params) {
    this.historyCache = new LocalLRU(params.searchKey);
    this.historyTags = this.historyCache.cache;
  },
  methods: {
    search() {
      this.historyCache.put(this.KeyWord);
      // 获取当前页上的栈（数组形式）
      var pages = getCurrentPages();
      //上一页面
      var prevPage = pages[pages.length - 2]; // （pages.length - 3 上上页 pages.length - 1当前页，以此类推）

      prevPage.$vm?.searchCallBack?.(this.KeyWord);
      // 返回上一页
      this.$nextTick(() => {
        uni.navigateBack({ delta: 1 });
      });
    },
    clearCache() {
      this.historyCache.clear();
      this.historyTags = [];
    }
  }
};
</script>

<style lang="scss">
.j-search-page {
  .block {
    padding: 30rpx;
    &-bar {
      @include flexBox($jc: space-between);
      .title {
        font-size: $j_fz;
        font-weight: bold;
      }
      .clear {
        @include flexBox();
        font-size: $j_fz;
      }
    }
    &-tags {
      margin-top: 15rpx;
      width: 100%;
      // background-color: pink;
      @include flexBox($jc: flex-start);
      flex-wrap: wrap;
      .j-tag {
        padding: 5rpx 15rpx;
        border-radius: 5rpx;
        margin: 15rpx;
        border: 1rpx solid rgb(192, 192, 192);
        color: $j_content;
        font-size: $j_fz;
      }
    }
  }
}
</style>
